<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-select v-model="filters.phaseId" placeholder="请选择学段" style="width:150px;" clearable>
						<el-option label="全部" value=""></el-option>
						<el-option v-for="(item,i) in phaseList" :key="i" :label="item.phaseName" :value="item.phaseId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getSubjects">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="tableData" highlight-current-row v-loading="listLoading" style="width: 100%;">
			<el-table-column type="index" label="序号" width="60" align='center'>
				<template slot-scope="scope">   
                    {{pageSize*(nowPage-1)+scope.$index+1}}
                </template>
			</el-table-column>
			<el-table-column prop="subjectName" label="学科" min-width="200" align='center' >
			</el-table-column>
			<el-table-column prop="phaseName" label="学段" min-width="200" align='center' >
			</el-table-column>
			<el-table-column prop="sortNum" label="排序编码" min-width="100" align='center' >
			</el-table-column>
			<el-table-column label="操作" width="150" align='center' fixed="right">
				<template slot-scope="scope">
					<el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="text-align: center; ">
			</el-pagination>
		</el-col>

		<!--编辑界面-->
		<el-dialog title="编辑" :visible.sync="editFormVisible" :close-on-click-modal="false" :before-close="closeDialog" :append-to-body="true" v-loading="editLoading">
			<el-form :model="subjectForm" label-width="120px" :rules="subjectRules" ref="subjectForm">
				<el-form-item label="学科" prop="subjectName">
					<el-input v-model="subjectForm.subjectName" placeholder="请输入学科，最长30个汉字" style="float:left;width:77%;" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="学段" prop="phaseId">
					<el-select v-model="subjectForm.phaseId" placeholder="请选择学段" style="float:left;width:77%;">
						<el-option v-for="(item,i) in phaseList" :key="i" :label="item.phaseName" :value="item.phaseId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="排序编码" prop="sortNum">
					<el-input v-model="subjectForm.sortNum" placeholder="请输入排序编码" style="float:left;width:77%;"></el-input>
				</el-form-item>
				
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="closeDialog">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
		<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false" :before-close="closeDialog" :append-to-body="true" v-loading="addLoading">
			<el-form :model="subjectForm" label-width="120px" :rules="subjectRules" ref="subjectForm">
				<el-form-item label="学科" prop="subjectName">
					<el-input v-model="subjectForm.subjectName" placeholder="请输入学科，最长30个汉字" style="float:left;width:77%;" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="学段" prop="phaseId">
					<el-select v-model="subjectForm.phaseId" placeholder="请选择学段" style="float:left;width:77%;">
						<el-option v-for="(item,i) in phaseList" :key="i" :label="item.phaseName" :value="item.phaseId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="排序编码" prop="sortNum">
					<el-input v-model="subjectForm.sortNum" placeholder="请输入排序编码" style="float:left;width:77%;"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="closeDialog">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import util from '../../common/js/util'
	import { SysApi } from '@/api/index'

	export default {
		data() {
			var isInteger = (rule, value, callback) => {
				// if (!value) {
				// 	return callback(new Error('输入不可以为空'));
				// }
				setTimeout(() => {
					if (!Number(value)) {
						callback(new Error('请输入正整数'));
					} else {
						const re = /^[0-9]*[1-9][0-9]*$/;
						const rsCheck = re.test(value);
						if (!rsCheck) {
							callback(new Error('请输入正整数'));
						} else {
							callback();
						}
					}
				}, 1000);
			};
			return {
				filters: {
					phaseId:''
				},
				tableData: [],
				phaseList: [],
				total: 0,
				listLoading: true,

				//学科信息表单
				subjectForm: {
					subjectId: '',
					subjectName: '',
					phaseId: '',
					sortNum: '',
					phaseName: ''
				},

				editFormVisible: false,//编辑界面是否显示
				editLoading: false,

				addFormVisible: false,//新增界面是否显示
				addLoading: false,
			
				subjectRules: { //学科信息表单验证
					subjectName:[
						{ required: true, message: '请填写学科名称', trigger: 'blur' },
						{ min: 1, max: 30, message: '名称长度为 1 到 30 个字符', trigger: ['blur','change'] }
					],
					phaseId:[
						{ required: true,  message: '请选择学段', trigger: 'blur' }
					],
					sortNum:[
						{ required: true, message: '请填写排序编码', trigger: 'blur' },
						{ validator: isInteger, trigger: 'change' }

					]
            },
            pageSize:10,
            nowPage:1,

			}
		},
		created(){
			this.getSubjects();
			this.getPhaseList();

		},
		mounted() {
			this.getSubjects();
		},
		methods: {

			handleCurrentChange(val) {
				this.nowPage = val;
				this.getSubjects();
			},
			//获取学段列表
			getPhaseList(){
				SysApi.getPhaseList({}, res => {
					this.phaseList = res;
				}, (errorType, error) => {
				})
			},
			//获取学科列表
			getSubjects() {
				let params = {
					pageNum: this.nowPage,
					pageSize: this.pageSize,
					phaseId: this.filters.phaseId
				};
				this.listLoading = true;

				SysApi.getSubjectListPage(params,res =>{
					this.total = res.total;
					this.tableData = res.list;
					this.listLoading = false;
				}, (errorType, error) => {
					this.listLoading = false;
				})


			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
	
					let params = {
						 subjectId: row.subjectId
						 };

					SysApi.deleteSubject(params,res =>{
						this.listLoading = false;
						if (res!=null)
						{
							this.$message({
								message: '删除成功',
								type: 'success'
							});
						}
						this.getSubjects();
					}, (errorType, error) => {
						this.listLoading = false;
					}).catch((error) => {
						this.listLoading = false;
					})
				}).catch(() => {

				});
			},
			//显示编辑界面
			handleEdit: function (index, row) {
				
				this.editLoading = true;
				this.subjectForm = Object.assign({}, row);
				this.editFormVisible = true;
				this.editLoading = false;
				
			},
			//显示新增界面
			handleAdd: function () {
				
				this.addLoading = true;

				this.subjectForm.subjectId =  '';
				this.subjectForm.subjectName =  '';
				this.subjectForm.phaseId =  '';
				this.subjectForm.sortNum = '';
				this.subjectForm.phaseName =  '';

				this.addFormVisible = true;
				this.addLoading = false;
		
			},
			//编辑
			editSubmit: function () {
				this.$refs.subjectForm.validate((valid) => {
					if (valid) {
							//NProgress.start();
							let params = Object.assign({}, this.subjectForm);
							
							SysApi.saveSubject(params,res =>{
								this.listLoading = false;
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['subjectForm'].resetFields();
								this.editFormVisible = false;
								this.getSubjects();
							}, (errorType, error) => {
								this.$message({type: 'error', message: '提交失败!'})
								// console.log("error=");
								// console.log(error);
	
							})
							
					}
				});
			},
			//新增
			addSubmit: function () {
				this.$refs.subjectForm.validate((valid) => {
					if (valid) {
							//NProgress.start();
							let params = Object.assign({}, this.subjectForm);
							
							SysApi.saveSubject(params,res =>{
								this.listLoading = false;
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['subjectForm'].resetFields();
								this.addFormVisible = false;
								this.getSubjects();
							}, (errorType, error) => {
							})
						
					}
				});
			},
			closeDialog: function () {
				
				this.$refs['subjectForm'].resetFields();
				this.editFormVisible = false;
				this.addFormVisible = false;
			}
			

		},
		
	}

</script>

<style>
.el-table >.el-table__fixed {
    height: 100% !important; 
  }
.el-table >.el-table__fixed-right {
    height: 100% !important; 
  }
.el-table--scrollable-x .el-table__body-wrapper {
    z-index: 1;
  }
</style>